<template>
  <div class="store-management">
    <div class="page-header">
      <h2>商店商品管理</h2>
      <el-button type="primary" @click="openAddStoreModal" class="add-btn">
        + 添加商店
      </el-button>
    </div>

    <div v-if="stores.length > 0" class="store-list">
      <div v-for="store in stores" :key="store.id" class="store-card">
        <div class="store-header">
          <div class="store-info">
            <img v-if="store.logoUrl" :src="store.logoUrl" :alt="store.name" class="store-logo">
            <div class="store-details">
              <h3>{{ store.name }}</h3>
              <p class="store-address">{{ store.addressText }}</p>
              <p class="store-contact">联系电话: {{ store.contactPhone }}</p>
            </div>
          </div>
          <div class="store-actions">
            <el-button @click="editStore(store)" class="edit-btn" size="small">编辑</el-button>
            <el-button @click="confirmDeleteStore(store.id)" class="delete-btn" size="small">删除</el-button>
          </div>
        </div>

        <div class="products-section">
          <div class="products-header">
            <h4>商品列表</h4>
            <el-button @click="openAddProductModal(store.id)" class="add-product-btn" size="small">
              + 添加商品
            </el-button>
          </div>
          <div class="products-grid">
            <div v-if="productsMap[store.id] && productsMap[store.id].records.length > 0" class="product-list-items">
              <div v-for="product in productsMap[store.id].records" :key="product.id" class="product-card">
                <img v-if="product.mainImageUrl" :src="product.mainImageUrl" :alt="product.name" class="product-image">
                <div class="product-info">
                  <h5>{{ product.name }}</h5>
                  <p class="product-price">¥{{ product.price }}</p>
                  <p class="product-stock">库存: {{ product.stock }}</p>
                  <div class="product-actions">
                    <el-button @click="editProduct(product)" class="edit-btn" size="small">编辑</el-button>
                    <el-button @click="confirmDeleteProduct(product.id, store.id)" class="delete-btn" size="small">删除</el-button>
                  </div>
                </div>
              </div>
            </div>
            <el-empty v-else description="该商店暂无商品"></el-empty>
          </div>
          <div class="pagination-container" v-if="productsMap[store.id] && productsMap[store.id].total > productsMap[store.id].size">
            <el-pagination
              small
              background
              layout="prev, pager, next"
              :total="productsMap[store.id].total"
              :page-size="productsMap[store.id].size"
              :current-page="productsMap[store.id].current"
              @current-change="(newPage) => handleProductPageChange(store.id, newPage)"
            />
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无商店信息，请先添加商店"></el-empty>

    <div class="pagination-container" v-if="storeTotal > storePageSize">
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        :total="storeTotal"
        v-model:page-size="storePageSize"
        v-model:current-page="storeCurrentPage"
        @size-change="handleStoreSizeChange"
        @current-change="handleStorePageChange"
      />
    </div>

    <!-- 美化后的商店编辑模态框 -->
    <div v-if="showStoreModal" class="modal-overlay" @click="closeStoreModal">
      <div class="enhanced-modal" @click.stop>
        <div class="modal-header">
          <div class="header-content">
            <div class="header-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7M3 7L12 2L21 7M3 7L12 13L21 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <h3>{{ editingStore ? '编辑商店' : '添加商店' }}</h3>
              <p class="header-subtitle">{{ editingStore ? '修改商店信息' : '创建新的商店' }}</p>
            </div>
          </div>
          <button @click="closeStoreModal" class="close-btn">×</button>
        </div>
        
        <form @submit.prevent="saveStore" class="enhanced-modal-form">
          <div class="form-sections">
            <!-- 商店Logo上传区域 -->
            <div class="form-section logo-section">
              <h4 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                  <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                  <path d="M21 15L16 10L5 21" stroke="currentColor" stroke-width="2"/>
                </svg>
                商店Logo
              </h4>
              <div class="logo-upload-container">
                <input
                  ref="logoInput"
                  type="file"
                  accept="image/*"
                  @change="handleLogoUpload"
                  style="display: none;"
                >
                <div 
                  class="logo-upload-area"
                  @click="triggerLogoUpload"
                  @paste="handleLogoPaste"
                  @dragover.prevent
                  @drop.prevent="handleLogoDrop"
                  tabindex="0"
                >
                  <div v-if="storeForm.logoUrl" class="logo-preview-container">
                    <img :src="storeForm.logoUrl" alt="商店Logo预览" class="logo-preview">
                    <div class="logo-upload-overlay">
                      <div class="overlay-content">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <polyline points="10,9 9,9 8,9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <span>点击或粘贴更换</span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="logo-upload-placeholder">
                    <div class="placeholder-content">
                      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                        <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                        <path d="M21 15L16 10L5 21" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      <div class="placeholder-text">
                        <p class="main-text">点击上传或粘贴图片</p>
                        <p class="sub-text">支持 JPG、PNG、GIF 格式，建议尺寸 200x200px</p>
                        <p class="sub-text">也可以直接拖拽图片到此区域</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="logo-actions">
                  <button
                    v-if="storeForm.logoUrl"
                    type="button"
                    @click="storeForm.logoUrl = ''"
                    class="clear-logo-btn"
                  >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <path d="M15 9L9 15M9 9L15 15" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    清除图片
                  </button>
                </div>
                <div class="url-input-group">
                  <label>或直接输入图片URL</label>
                  <input v-model="storeForm.logoUrl" type="text" placeholder="https://example.com/logo.jpg" class="url-input">
                </div>
              </div>
            </div>

            <!-- 基本信息区域 -->
            <div class="form-section basic-info-section">
              <h4 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                </svg>
                基本信息
              </h4>
              <div class="form-grid">
                <div class="form-group">
                  <label class="enhanced-label">
                    <span class="label-text">商店名称</span>
                    <span class="required-mark">*</span>
                  </label>
                  <input v-model="storeForm.name" type="text" required class="enhanced-input" placeholder="请输入商店名称">
                </div>
                <div class="form-group">
                  <label class="enhanced-label">
                    <span class="label-text">联系电话</span>
                  </label>
                  <input v-model="storeForm.contactPhone" type="tel" class="enhanced-input" placeholder="请输入联系电话">
                </div>
              </div>
            </div>

            <!-- 地址信息区域 -->
            <div class="form-section address-section">
              <h4 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 10C21 17 12 23 12 23S3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.3639 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                地址信息
              </h4>
              <div class="form-group">
                <label class="enhanced-label">
                  <span class="label-text">详细地址</span>
                  <span class="required-mark">*</span>
                </label>
                <textarea v-model="storeForm.addressText" required class="enhanced-textarea" placeholder="请输入详细地址" rows="3"></textarea>
              </div>
              <div class="form-grid">
                <div class="form-group">
                  <label class="enhanced-label">
                    <span class="label-text">经度</span>
                    <span class="required-mark">*</span>
                  </label>
                  <input v-model.number="storeForm.longitude" type="number" step="any" required class="enhanced-input" placeholder="请输入经度">
                </div>
                <div class="form-group">
                  <label class="enhanced-label">
                    <span class="label-text">纬度</span>
                    <span class="required-mark">*</span>
                  </label>
                  <input v-model.number="storeForm.latitude" type="number" step="any" required class="enhanced-input" placeholder="请输入纬度">
                </div>
              </div>
            </div>
          </div>

          <div class="enhanced-modal-actions">
            <button type="button" @click="closeStoreModal" class="cancel-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              取消
            </button>
            <button type="submit" class="save-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ editingStore ? '更新商店' : '创建商店' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <div v-if="showProductModal" class="modal-overlay" @click="closeProductModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h3>{{ editingProduct ? '编辑商品' : '添加商品' }}</h3>
          <button @click="closeProductModal" class="close-btn">×</button>
        </div>
        <form @submit.prevent="saveProduct" class="modal-form">
          <!-- 基本信息 -->
          <div class="form-group">
            <label>商品名称 *</label>
            <input v-model="productForm.name" type="text" required>
          </div>
          <div class="form-group">
            <label>商品分类 *</label>
            <select v-model="productForm.categoryId" required>
              <option value="">请选择分类</option>
              <option v-for="category in categories" :key="category.id" :value="category.id">
                {{ category.name }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <label>价格 *</label>
            <input v-model.number="productForm.price" type="number" step="0.01" min="0" required>
          </div>
          <div class="form-group">
            <label>库存 *</label>
            <input v-model.number="productForm.stock" type="number" min="0" required>
          </div>
          
          <!-- 添加折扣字段 -->
          <div class="form-group">
            <label>折扣 <span class="help-text">(1.0=无折扣, 0.8=8折)</span></label>
            <input 
              v-model.number="productForm.discount" 
              type="number" 
              step="0.01" 
              min="0.01" 
              max="1.0" 
              placeholder="1.0"
            >
            <div class="discount-preview" v-if="productForm.price && productForm.discount < 1">
              <span class="original-price">原价: ¥{{ productForm.price.toFixed(2) }}</span>
              <span class="discounted-price">折后价: ¥{{ (productForm.price * productForm.discount).toFixed(2) }}</span>
              <span class="discount-percent">{{ Math.round((1 - productForm.discount) * 100) }}% OFF</span>
            </div>
          </div>

          <!-- 修改这里：添加图片上传功能 -->
          <div class="form-group">
            <label>主图</label>
            <div class="file-upload-group">
              <input
                ref="imageInput"
                type="file"
                accept="image/*"
                @change="handleImageUpload"
                style="display: none;"
              >
              <div class="upload-area" @click="triggerImageUpload">
                <div v-if="productForm.mainImageUrl" class="preview-container">
                  <img :src="productForm.mainImageUrl" alt="商品图片预览" class="image-preview">
                  <div class="upload-overlay">
                    <span>点击更换图片</span>
                  </div>
                </div>
                <div v-else class="upload-placeholder">
                  <span>点击上传商品图片</span>
                </div>
              </div>
              <button
                v-if="productForm.mainImageUrl"
                type="button"
                @click="productForm.mainImageUrl = ''"
                class="clear-btn"
              >
                清除图片
              </button>
            </div>
            <div class="form-input">
              <label>或直接输入URL</label>
              <input v-model="productForm.mainImageUrl" type="text" placeholder="图片URL">
            </div>
          </div>

          <!-- 修改这里：添加视频上传功能 -->
          <div class="form-group">
            <label>视频</label>
            <div class="file-upload-group">
              <input
                ref="videoInput"
                type="file"
                accept="video/*"
                @change="handleVideoUpload"
                style="display: none;"
              >
              <div class="upload-area" @click="triggerVideoUpload">
                <div v-if="productForm.videoUrl" class="preview-container">
                  <video controls class="video-preview">
                    <source :src="productForm.videoUrl" type="video/mp4">
                    您的浏览器不支持视频播放
                  </video>
                  <div class="upload-overlay">
                    <span>点击更换视频</span>
                  </div>
                </div>
                <div v-else class="upload-placeholder">
                  <span>点击上传商品视频</span>
                </div>
              </div>
              <button
                v-if="productForm.videoUrl"
                type="button"
                @click="productForm.videoUrl = ''"
                class="clear-btn"
              >
                清除视频
              </button>
            </div>
            <div class="form-input">
              <label>或直接输入URL</label>
              <input v-model="productForm.videoUrl" type="text" placeholder="视频URL">
            </div>
          </div>

          <div class="form-group">
            <label>商品描述</label>
            <textarea v-model="productForm.description" rows="3"></textarea>
          </div>

          <!-- 是否为宠物 -->
          <div class="form-group checkbox-group">
            <label>
              <input type="checkbox" v-model="productForm.isPet">
              是否为宠物
            </label>
          </div>

          <!-- 宠物专属属性，仅当isPet为true时显示 -->
          <div v-if="productForm.isPet" class="pet-attributes">
            <h4>宠物专属信息</h4>
            <div class="form-group">
              <label>品种</label>
              <input v-model="productForm.breed" type="text">
            </div>
            <div class="form-group">
              <label>年龄</label>
              <input v-model="productForm.age" type="text">
            </div>
            <div class="form-group">
              <label>性别</label>
              <select v-model="productForm.sex">
                <option value="">请选择</option>
                <option value="雌性">雌性</option>
                <option value="雄性">雄性</option>
              </select>
            </div>
            <div class="form-group">
              <label>体重(kg)</label>
              <input v-model.number="productForm.weight" type="number" step="0.1" min="0">
            </div>
            <div class="form-group">
              <label>颜色</label>
              <input v-model="productForm.color" type="text">
            </div>
            <div class="form-group">
              <label>健康信息</label>
              <textarea v-model="productForm.healthInfo" rows="3"></textarea>
            </div>
          </div>

          <div class="modal-actions">
            <button type="button" @click="closeProductModal" class="cancel-btn">取消</button>
            <button type="submit" class="save-btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { adminStoreApi, adminProductApi, adminFileApi } from '@/api/admin'; // 添加adminFileApi导入
import { ElMessage, ElMessageBox, ElPagination, ElEmpty, ElButton, ElIcon, ElLoading } from 'element-plus';
import { ADMIN_API } from '@/api/config';
import { publicApi } from '@/api/public'; // 添加这一行导入 publicApi

// --- 类型定义 ---
interface Store {
  id: number;
  name: string;
  addressText: string;
  logoUrl?: string;
  contactPhone?: string;
  longitude?: number;
  latitude?: number;
}
interface Product {
  id: number;
  storeId: number;
  categoryId: number;
  name: string;
  price: number;
  stock: number;
  mainImageUrl?: string;
  breed?: string;
  age?: string;
  sex?: string;
  weight?: number;
  color?: string;
  description?: string;
  healthInfo?: string;
  videoUrl?: string;
  discount?: number;
}
interface Page<T> {
  records: T[];
  total: number;
  size: number;
  current: number;
}

// [ADDED] 分类数据类型定义
interface Category {
  id: number;
  name: string;
  parentId: number;
}
interface TreeSelectOption {
  value: number;
  label: string;
  children?: TreeSelectOption[];
}

// --- 商店相关状态 ---
const stores = ref<Store[]>([]);
const storeCurrentPage = ref(1);
const storePageSize = ref(10);
const storeTotal = ref(0);
const showStoreModal = ref(false);
const editingStore = ref<Store | null>(null);
const storeForm = reactive({
  id: null as number | null,
  name: '',
  addressText: '',
  longitude: 0,
  latitude: 0,
  logoUrl: '',
  contactPhone: ''
});


// --- 商品相关状态 ---
const productsMap = ref<Record<number, Page<Product>>>({});
const showProductModal = ref(false);
const editingProduct = ref<Product | null>(null);
const currentStoreIdForProduct = ref<number | null>(null);
// 商品表单的响应式对象
const productForm = reactive({
  id: null as number | null,
  storeId: 0,
  categoryId: null as number | null, // 允许为空
  name: '',
  price: 0,
  stock: 0,
  mainImageUrl: '',
  videoUrl: '',
  description: '',
  isPet: false,
  // 宠物专属属性
  breed: '',
  age: '',
  sex: '',
  weight: 0,
  color: '',
  healthInfo: '',
  discount: 1.0 // 添加折扣字段，默认1.0表示无折扣
});

// 分类列表
const categories = ref<any[]>([]);

// 文件上传相关引用
const imageInput = ref<HTMLInputElement | null>(null);
const videoInput = ref<HTMLInputElement | null>(null);
// 商店Logo上传相关引用
const logoInput = ref<HTMLInputElement | null>(null);

// 图片上传相关方法
const triggerImageUpload = () => {
  // 触发文件选择框点击
  imageInput.value?.click();
};

const handleImageUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const files = target.files;

  if (files && files.length > 0) {
    const file = files[0];

    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      ElMessage.warning('请选择图片文件');
      return;
    }

    // 验证文件大小（限制为5MB）
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.warning('图片大小不能超过5MB');
      return;
    }

    // 显示上传中提示 - 修改这里
    const loadingInstance = ElLoading.service({
      fullscreen: true,
      text: '图片上传中...',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    try {
      // 创建FormData对象
      const formData = new FormData();
      formData.append('file', file);

      // 使用config.ts中定义的管理员文件上传接口
      const response = await fetch(ADMIN_API.UPLOAD, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: formData
      });

      if (!response.ok) {
        throw new Error('上传失败');
      }

      const data = await response.json();
      productForm.mainImageUrl = data.fileUrl;
      ElMessage.success('图片上传成功');
    } catch (error: any) {
      console.error('图片上传失败:', error);
      ElMessage.error(`上传失败: ${error.message || '未知错误'}`);
    } finally {
      // 关闭上传中提示 - 修改这里
      loadingInstance.close();
      // 清空文件输入框，以便可以重新选择同一文件
      target.value = '';
    }
  }
};

// 视频上传相关方法
const triggerVideoUpload = () => {
  // 触发文件选择框点击
  videoInput.value?.click();
};

const handleVideoUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const files = target.files;

  if (files && files.length > 0) {
    const file = files[0];

    // 验证文件类型
    if (!file.type.startsWith('video/')) {
      ElMessage.warning('请选择视频文件');
      return;
    }

    // 验证文件大小（限制为50MB）
    if (file.size > 50 * 1024 * 1024) {
      ElMessage.warning('视频大小不能超过50MB');
      return;
    }

    // 显示上传中提示 - 修改这里
    const loadingInstance = ElLoading.service({
      fullscreen: true,
      text: '视频上传中...',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    try {
      // 创建FormData对象
      const formData = new FormData();
      formData.append('file', file);

      // 使用config.ts中定义的管理员文件上传接口
      const response = await fetch(ADMIN_API.UPLOAD, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: formData
      });

      if (!response.ok) {
        throw new Error('上传失败');
      }

      const data = await response.json();
      productForm.videoUrl = data.fileUrl;
      ElMessage.success('视频上传成功');
    } catch (error: any) {
      console.error('视频上传失败:', error);
      ElMessage.error(`上传失败: ${error.message || '未知错误'}`);
    } finally {
      // 关闭上传中提示 - 修改这里
      loadingInstance.close();
      // 清空文件输入框，以便可以重新选择同一文件
      target.value = '';
    }
  }
};

// 获取分类列表
const fetchCategories = async () => {
  try {
    // 使用 publicApi.getCategoryList() 方法获取分类列表
    const response = await publicApi.getCategoryList();
    categories.value = response.data || [];
  } catch (error) {
    console.error('获取分类列表失败:', error);
    ElMessage.error('获取分类列表失败');
  }
};


// 商店Logo上传相关方法
const triggerLogoUpload = () => {
  logoInput.value?.click();
};

const handleLogoUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const files = target.files;

  if (files && files.length > 0) {
    const file = files[0];
    await uploadLogoFile(file);
    target.value = ''; // 清空文件输入框
  }
};

// 处理图片粘贴
const handleLogoPaste = async (event: ClipboardEvent) => {
  const items = event.clipboardData?.items;
  if (!items) return;

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    if (item.type.indexOf('image') !== -1) {
      const file = item.getAsFile();
      if (file) {
        await uploadLogoFile(file);
        break;
      }
    }
  }
};

// 处理图片拖拽
const handleLogoDrop = async (event: DragEvent) => {
  const files = event.dataTransfer?.files;
  if (files && files.length > 0) {
    const file = files[0];
    if (file.type.startsWith('image/')) {
      await uploadLogoFile(file);
    } else {
      ElMessage.warning('请拖拽图片文件');
    }
  }
};

// 统一的Logo文件上传处理
const uploadLogoFile = async (file: File) => {
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.warning('请选择图片文件');
    return;
  }

  // 验证文件大小（限制为5MB）
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.warning('图片大小不能超过5MB');
    return;
  }

  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: 'Logo上传中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  try {
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch(ADMIN_API.UPLOAD, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      },
      body: formData
    });

    if (!response.ok) {
      throw new Error('上传失败');
    }

    const data = await response.json();
    storeForm.logoUrl = data.fileUrl;
    ElMessage.success('Logo上传成功');
  } catch (error: any) {
    console.error('Logo上传失败:', error);
    ElMessage.error(`上传失败: ${error.message || '未知错误'}`);
  } finally {
    loadingInstance.close();
  }
};

// [ADDED] 为文件上传创建template ref
const logoFileInput = ref<HTMLInputElement | null>(null);
const productImageFileInput = ref<HTMLInputElement | null>(null);
const productVideoFileInput = ref<HTMLInputElement | null>(null);

// --- 数据获取逻辑 ---
const fetchStores = async () => {
  try {
    const response = await adminStoreApi.getStoreList({
      current: storeCurrentPage.value,
      size: storePageSize.value
    });
    stores.value = response.data.records || [];
    storeTotal.value = response.data.total || 0;
    fetchProductsForVisibleStores();
  } catch (error) {
    console.error('获取商店列表失败:', error);
    ElMessage.error('获取商店列表失败');
  }
};

const fetchProductsForVisibleStores = () => {
  stores.value.forEach(store => {
    fetchProductsByStore(store.id, 1);
  });
};

const fetchProductsByStore = async (storeId: number, pageNum: number) => {
  try {
    const response = await adminProductApi.getProductList({
      current: pageNum,
      size: 4, // 每个商店内每页显示4个商品
      storeId: storeId
    });
    productsMap.value[storeId] = response.data;
  } catch (error) {
    console.error(`获取商店 ${storeId} 的商品失败:`, error);
  }
}

// [MODIFIED] 获取并构建分类树的方法
const fetchAndBuildCategories = async () => {
  try {
    // 使用导入的 publicApi 来调用接口
    const response = await publicApi.getCategoryList();
    const categories: Category[] = response.data || [];
    categoryOptions.value = buildCategoryTree(categories, 0);
  } catch (error) {
    console.error("获取分类数据失败:", error);
    ElMessage.error("分类数据加载失败");
  }
}

// [ADDED] 将扁平列表转换为树形结构的方法
const buildCategoryTree = (categories: Category[], parentId: number): TreeSelectOption[] => {
  return categories
    .filter(category => category.parentId === parentId)
    .map(category => {
      const children = buildCategoryTree(categories, category.id);
      const option: TreeSelectOption = {
        value: category.id,
        label: category.name,
      };
      if (children.length > 0) {
        option.children = children;
      }
      return option;
    });
};

// [ADDED] 文件上传相关的方法
const triggerFileUpload = (fileInputRef: React.Ref<HTMLInputElement>) => {
  fileInputRef.value?.click();
};

const handleFileUpload = async (event: Event, targetUrlModel: { url: string }) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;

  // 可以在这里添加对文件大小和类型的校验
  // 例如: if (!file.type.startsWith('image/')) { ... }

  try {
    const response = await adminFileApi.adminUploadFile(file);
    targetUrlModel.url = response.data.fileUrl; // 将返回的URL赋值给表单
    ElMessage.success("文件上传成功！");
  } catch (error) {
    console.error("文件上传失败:", error);
    ElMessage.error("文件上传失败");
  }
};

// --- 分页事件处理 ---
const handleStorePageChange = (newPage: number) => {
  storeCurrentPage.value = newPage;
  fetchStores();
}
const handleStoreSizeChange = (newSize: number) => {
  storePageSize.value = newSize;
  storeCurrentPage.value = 1;
  fetchStores();
}
const handleProductPageChange = (storeId: number, newPage: number) => {
  fetchProductsByStore(storeId, newPage);
}

// --- 商店CRUD逻辑 ---
const openAddStoreModal = () => {
  editingStore.value = null;
  Object.assign(storeForm, { id: null, name: '', addressText: '', longitude: 0, latitude: 0, logoUrl: '', contactPhone: '' });
  showStoreModal.value = true;
};
const editStore = (store: Store) => {
  editingStore.value = store;
  Object.assign(storeForm, store);
  showStoreModal.value = true;
};
const closeStoreModal = () => {
  showStoreModal.value = false;
};
const saveStore = async () => {
  try {
    const payload = { ...storeForm };
    if (editingStore.value) {
      await adminStoreApi.updateStore(editingStore.value.id, payload);
      ElMessage.success('商店更新成功');
    } else {
      await adminStoreApi.createStore(payload);
      ElMessage.success('商店添加成功');
    }
    closeStoreModal();
    fetchStores();
  } catch (error) {
    ElMessage.error('保存商店失败');
  }
};
const confirmDeleteStore = (storeId: number) => {
  ElMessageBox.confirm('此操作将永久删除该商店及其下所有关联商品，是否继续?', '警告', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => deleteStore(storeId));
};
const deleteStore = async (storeId: number) => {
  try {
    await adminStoreApi.deleteStore(storeId);
    ElMessage.success('商店删除成功');
    fetchStores();
  } catch (error) {
    ElMessage.error('删除商店失败');
  }
};


// --- 商品模态框与CRUD逻辑 ---
const openAddProductModal = (storeId: number) => {
  editingProduct.value = null;
  currentStoreIdForProduct.value = storeId;
  // 重置 productForm 并设置 storeId
  Object.assign(productForm, {
    id: null,
    storeId: storeId,
    categoryId: 0,
    name: '',
    price: 0,
    stock: 0,
    mainImageUrl: '',
    videoUrl: '',
    description: '',
    isPet: false,
    breed: '',
    age: '',
    sex: '',
    weight: 0,
    color: '',
    healthInfo: ''
  });
  showProductModal.value = true;
};

const editProduct = (product: Product) => {
  editingProduct.value = product;
  currentStoreIdForProduct.value = product.storeId;
  // 复制产品数据到表单
  Object.assign(productForm, product);
  showProductModal.value = true;
};

const closeProductModal = () => {
  showProductModal.value = false;
};

const saveProduct = async () => {
  try {
    // 验证表单
    if (!productForm.name || !productForm.categoryId || productForm.price <= 0) {
      ElMessage.warning('请填写必填字段');
      return;
    }

    // 如果不是宠物，清空宠物专属属性 - 修改这里
    if (!productForm.isPet) {
      productForm.breed = null;
      productForm.age = null;
      productForm.sex = null;
      productForm.weight = null;
      productForm.color = null;
      productForm.healthInfo = null;
    }

    if (editingProduct.value) {
      // 更新商品
      await adminProductApi.updateProduct(editingProduct.value.id, productForm);
      ElMessage.success('商品更新成功');
    } else {
      // 创建商品
      await adminProductApi.createProduct(productForm);
      ElMessage.success('商品添加成功');
    }

    closeProductModal();
    // 刷新商品列表
    if (currentStoreIdForProduct.value) {
      fetchProductsByStore(currentStoreIdForProduct.value, 1);
    }
  } catch (error) {
    console.error('保存商品失败:', error);
    ElMessage.error('保存商品失败');
  }
};

const confirmDeleteProduct = (productId: number) => {
  ElMessageBox.confirm('此操作将永久删除该商品，是否继续?', '警告', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteProduct(productId);
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

const deleteProduct = async (productId: number) => {
  try {
    await adminProductApi.deleteProduct(productId);
    ElMessage.success('商品删除成功');
    // 刷新所有商店的商品列表
    stores.value.forEach(store => {
      fetchProductsByStore(store.id, 1);
    });
  } catch (error) {
    console.error('删除商品失败:', error);
    ElMessage.error('删除商品失败');
  }
};

onMounted(() => {
  fetchStores();
  fetchCategories();
});
</script>

<style scoped>
.store-management {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.page-header h2 {
  margin: 0;
}
.add-btn {
  /* ... */
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.store-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #eef2f7;
}
.store-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f2f5;
}
.store-info {
  display: flex;
  gap: 16px;
  align-items: center;
}
.store-logo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}
.store-details h3 {
  font-size: 18px;
}
.store-address, .store-contact {
  font-size: 14px;
  color: #606266;
}
.store-actions {
  display: flex;
  gap: 8px;
}
.edit-btn {
  background-color: #67c23a;
  color: white;
  border: none;
}
.delete-btn {
  background-color: #f56c6c;
  color: white;
  border: none;
}

.products-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f2f5;
}
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.products-header h4 {
  margin: 0;
  font-size: 16px;
}
.add-product-btn {
  background-color: #73767a;
  color: white;
  border: none;
}

.products-grid {
  width: 100%;
}
.product-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.product-card {
  border: 1px solid #eef2f7;
  border-radius: 8px;
  padding: 12px;
  width: calc(25% - 12px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s, transform 0.3s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.product-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 8px;
  border-radius: 4px;
}
.product-info h5 {
  margin: 0 0 4px 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-price {
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 4px;
}
.product-stock {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}
.product-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-bottom: 24px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.modal-form {
  padding: 24px;
  overflow-y: auto;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
}
.pet-fields {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-top: 16px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

/* 宠物属性部分样式 */
.pet-attributes {
  margin-top: 16px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}

.pet-attributes h4 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
  font-size: 16px;
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 8px;
}

/* 表单控件样式 */
.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group select {
  height: 38px;
}

/* 添加上传相关样式 */
.upload-container {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.upload-container input[type="text"] {
  flex: 1;
}

.preview-image img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 8px;
}

.preview-video video {
  max-width: 100%;
  max-height: 200px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 8px;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

/* 文件上传区域样式 */
.file-upload-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.upload-area {
  width: 200px;
  height: 200px;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #409eff;
}

.upload-placeholder {
  color: #909399;
  font-size: 14px;
  text-align: center;
}

.preview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-preview, .video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.preview-container:hover .upload-overlay {
  opacity: 1;
}

.clear-btn {
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  align-self: flex-start;
}

.clear-btn:hover {
  background-color: #e74c3c;
}

.form-input {
  margin-top: 10px;
}

.form-input label {
  display: block;
  font-size: 12px;
  color: #606266;
  margin-bottom: 5px;
}

/* 增强的模态框样式 */
.enhanced-modal {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.header-content h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.header-subtitle {
  margin: 4px 0 0 0;
  font-size: 14px;
  opacity: 0.9;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.enhanced-modal-form {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
}

.form-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-section {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.enhanced-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
}

.label-text {
  font-size: 14px;
}

.required-mark {
  color: #ef4444;
  font-size: 14px;
}

.enhanced-input,
.enhanced-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.enhanced-input:focus,
.enhanced-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.enhanced-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Logo上传区域样式 */
.logo-upload-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.logo-upload-area {
  width: 200px;
  height: 200px;
  border: 3px dashed #cbd5e1;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  background: white;
}

.logo-upload-area:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.logo-upload-area:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.logo-upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-content {
  text-align: center;
  color: #64748b;
}

.placeholder-content svg {
  margin-bottom: 12px;
  opacity: 0.6;
}

.placeholder-text .main-text {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: #374151;
}

.placeholder-text .sub-text {
  font-size: 12px;
  margin: 4px 0;
  color: #6b7280;
}

.logo-preview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.logo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.logo-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 8px;
}

.logo-preview-container:hover .logo-upload-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
}

.overlay-content svg {
  margin-bottom: 8px;
}

.overlay-content span {
  font-size: 14px;
  font-weight: 500;
}

.logo-actions {
  display: flex;
  gap: 12px;
}

.clear-logo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ef4444;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.clear-logo-btn:hover {
  background: #dc2626;
}

.url-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.url-input-group label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.url-input {
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s;
}

.url-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 模态框操作按钮 */
.enhanced-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.enhanced-modal-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.cancel-btn {
  background: #f1f5f9;
  color: #64748b;
}

.cancel-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .enhanced-modal {
    width: 95%;
    max-height: 95vh;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .enhanced-modal-form {
    padding: 20px;
  }
  
  .form-section {
    padding: 16px;
  }
  
  .logo-upload-area {
    width: 150px;
    height: 150px;
  }
}

.help-text {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

.discount-preview {
  margin-top: 8px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 12px;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  margin-right: 10px;
}

.discounted-price {
  color: #f56c6c;
  font-weight: bold;
  margin-right: 10px;
}

.discount-percent {
  background-color: #f56c6c;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
}
</style>
